<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		  <style>
            html,
            body {
                height: 100%;
            }
            body {
                margin: 0;
            }
            .mui-content {
                height: 100%;
                padding: 0;
            }
            .mui-slider {
                height: 100%;
            }
            .mui-slider-group {
                height: 100%;
            }
            .mui-slider-item {
                height: 100%;
                width: 100%;
                margin-left: 0px;
                margin-right: 0px;
                border: none;
            }
            a {
                height: 100%;
            }
            #into { 
            	 	width: 200px;   
                line-height: 40px;
                text-align: center;  
                position: absolute; 
                 bottom: 5%;
             left: calc(50% - 100px);
             
                border: none;
                background: ghostwhite;
                z-index:9999;
            
            }
            img{
            	width: 100%;height: 100%; background-position: 100% 100%;
            }
            .img_content {
                position: relative;
                width: 100%;
                height: 100%;
            }
            .img_content img:nth-child(3) {
                position: absolute;
                bottom: 10%;
            }
        </style>
	</head>

	<body>
		  <div class="mui-content" style="height: 100%;overflow: hidden;padding: 0px;margin: 0px;background-color: #5dcbe2;">
            <div id="slider" class="mui-slider">
                <div class="mui-slider-group">
                    <!-- 第一张 -->
                    <div class="mui-slider-item" style="background-color: #5dcbe2;">
                        <div class="img_content"> 
                       	<img src="img/9b698923217ecad8d8d545d6b2a8e73c.jpg"/> 
                        </div>

                    </div>

                    <!-- 第二张 -->
                    <div class="mui-slider-item" style="background-color: #68d8b0;">
                        <div class="img_content">
                        	<img src="img/aa4807d3f7bac5f6cb7d0f2f8c23e265.jpg"/>  
                        </div>
                    </div>
                    <!-- 第三张-->

                    <div class="mui-slider-item" style="background-color: #c1392b;">
                        <div class="img_content">
                        	<img src="img/dcaa917566213e0be0d5297ba9ed0433.jpg"/> 
                            <button id="into">跳过</button> 
                        </div>

                    </div>
                </div>
                <div class="mui-slider-indicator">
                    <div class="mui-indicator mui-active"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                </div>
            </div>

        </div>
        </div>
        
		<script src="js/mui.min.js"></script>
		 <script type="text/javascript" charset="utf-8">
        mui.init();
        mui.plusReady(function(){           
            mui.os.ios&&plus.navigator.setFullscreen(true);         
            var slider = mui('.mui-slider').slider();           
            initPageguid();         
            setStatusBarBackgroud();            
            plus.navigator.closeSplashscreen();
            mui("#into")[0].addEventListener('tap', function() {   
            	mui.openWindow({
            		url:'login.html',
            		id:'login.html'
            	})
               
            }); 
            
            function initPageguid(){
                //绑定滑屏相关事件
                var gallery = mui('.mui-slider')[0];
                gallery.addEventListener('swiperight', function(e) {
                    //向左划动
                    var num = mui('.mui-slider').slider().getSlideNumber() - 1;
                    setContainerBackg(num);
                });
                gallery.addEventListener('swipeleft', function(e) {
                    //向右划动
                    var num = mui('.mui-slider').slider().getSlideNumber() + 1;
                    setContainerBackg(num);
                });
            }
            
            function setStatusBarBackgroud () {
                if (mui.os.ios) {
                    plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
                    //提前设置登陆页背景颜色
                    plus.navigator.setStatusBarBackground("#3A75B8");
                }
            };
            function setContainerBackg(num) {
                //提前设置背景色
                if (num == 0) {
                    mui('.mui-content')[0].style.backgroundColor = '#fff';
                } else if (num == 2) {
                    mui('.mui-content')[0].style.backgroundColor = '#fff';
                }
            };
        })      
    </script>
	</body>

</html>